<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      class="globalSerchFormStyle"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="卡号" prop="physicalCardNo">
            <el-input
              v-model="queryParams.physicalCardNo"
              placeholder="请输入卡号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="卡类型" prop="cardType">
            <el-select
              v-model="queryParams.cardType"
              placeholder="请选择卡类型"
              clearable
              size="small"
              style="width: 190px"
            >
              <el-option
                v-for="(item, index) in cardStatusTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="卡名称" prop="physicalCardName">
            <el-input
              v-model="queryParams.physicalCardName"
              placeholder="请输入卡名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入联系人"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
          type="primary"
          plain
          >重置</el-button
        >
      </el-col>
    </el-row>

    <el-table
      :data="cardList"
      stripe
      @select="select"
      @select-all="selectAll"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55" align="left" />
      <!-- <el-table-column
        v-if="authUser"
        label="油企名称"
        align="left"
        prop="enterpriseName"
        width="120"
        show-overflow-tooltip
      /> -->
      <!-- <el-table-column
        label="油站名称"
        align="left"
        prop="stationName"
        width="140"
        show-overflow-tooltip
      /> -->
      <el-table-column
        label="卡类型"
        align="left"
        prop="cardType"
        :formatter="cardTypeFormatter"
        show-overflow-tooltip
      />
      <el-table-column
        label="卡号"
        align="left"
        prop="physicalCardNo"
        show-overflow-tooltip
      />
      <el-table-column label="手机号" align="left" prop="userPhone" />
      <el-table-column
        label="联系人"
        align="left"
        prop="userName"
        show-overflow-tooltip
      />

      <el-table-column
        label="开卡时间"
        align="left"
        prop="createTime"
        sortable
      />
    </el-table>
    <el-pagination
      class="fr"
      style="margin-top: 8px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { physicalCardUpdateStatus, getSignoutList } from "@/api/ic/info";
import { listEnterpriseStation } from "@/api/dept";
import { enterpriseList } from "@/api/station/order";
export default {
  name: "SignOut",
  data() {
    return {
      loading: false,
      // 总条数
      total: 0,
      cardStatusTypeList: [
        {
          value: "0",
          label: "通用卡",
        },
        {
          value: "1",
          label: "汽油卡",
        },
        {
          value: "2",
          label: "柴油卡",
        },
        {
          value: "4",
          label: "CNG",
        },
        {
          value: "3",
          label: "LNG",
        },
      ],
      // 查询参数
      queryParams: {},
      isSelectAll: false,
      cardList: [], // 实体卡列表
      page: 1,
      pageSize: 10,
      total: 0,
      selectedRow: [], // 选中的数据
      enterpriseList: [],
      stationList: [],
      dateRangeCreatedDate: [],
      params: {},
      cardData: {
        device: 0,
        blockNumber: 1,
        scretKey: "FFFFFFFFFFFF",
        scretVal: "000000000000ff078069ffffffffffff",
      },
    };
  },
  created() {
    this.getEnterpriseList();
    // 如果当前是油企账号，则获取该企业下的油站
    if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
      this.getStationList(this.presentEnterprise.enterpriseId);
    }
    this.getData();
  },
  methods: {
    cardTypeFormatter(row) {
      let types = {
        0: "通用卡",
        1: "汽油卡",
        2: "柴油卡",
        3: "LNG",
        4: "CNG",
      };
      return types[row.cardType];
    },
    // 搜索
    handleQuery() {
      this.getData();
    },
    // 重置
    resetQuery() {
      this.$refs["queryForm"].resetFields();
      this.dateRangeCreatedDate = [];
      this.getData();
    },
    // 页码
    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.getData();
    },
    // 初始值
    async getData() {
      if (this.loading) return;
      this.loading = true;
      // let queryData = this.getQueryData(this.queryParams);
      const res = await getSignoutList(
        {
          pageNum: this.page,
          pageSize: this.pageSize,
        },
        this.queryParams
      );
      if (res && res.code === 200) {
        this.cardList = res.rows;
        this.total = res.total;
      } else {
        this.cardList = [];
        this.total = 0;
      }
      this.loading = false;
    },
    getQueryData(data) {
      let queryData = data;
      Object.keys(queryData).forEach((key) => {
        if (queryData[key] === "" || queryData[key] === undefined) {
          queryData[key] = null;
        }
      });
      return queryData;
    },
    // 根据油企获取油站
    handleSelectChange(value) {
      this.stationList = [];
      this.queryParams.stationId = null;
      this.getStationList(value);
    },
    // 查询油企
    getEnterpriseList() {
      enterpriseList().then((res) => {
        this.enterpriseList = res.rows;
      });
    },
    getStationList(val) {
      listEnterpriseStation({ enterpriseId: val }).then((res) => {
        this.stationList = res;
      });
    },
    select(selection, row) {
      if (selection.length == 0) {
        this.isSelectAll = false;
      } else {
        this.isSelectAll = true;
        this.selectedRow = selection;
      }
    },
    selectAll(val) {
      if (val.length == 0) {
        this.isSelectAll = false;
      } else {
        this.isSelectAll = true;
        this.selectedRow = val;
      }
    },
  },
  computed: {
    authUser() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.flex-statu {
  display: flex;
  align-items: center;
}

.title_line {
  position: relative;
  font-size: 23px;
  margin-left: 30px;
}

.card-item {
  margin-left: 50px;
}

.title_line::after {
  content: "";
  display: block;
  position: absolute;
  height: 20px;
  width: 5px;
  top: 6px;
  left: -10px;
  background-color: rgba(242, 131, 0, 1);
}

.drawer__footer {
  text-align: end;
}

::v-deep .add-drawer {
  overflow-y: auto;
}

::v-deep .cold_btn {
  background-color: rgba(170, 170, 170, 0.5) !important;
  color: #fff !important;
  border: none !important;
}

::v-deep .destroy_btn {
  background-color: rgba(217, 0, 27, 0.5) !important;
  color: #fff !important;
  border: none !important;
}

::v-deep .destroy_active {
  background-color: rgba(217, 0, 27, 1) !important;
  color: #fff !important;
  border: none !important;
}

::v-deep .cold_active {
  background-color: rgba(170, 170, 170, 1) !important;
  color: #fff !important;
  border: none !important;
}

::v-deep .destroy_btn:hover {
}
</style>
